<template>
  <div class="layout" ref="screen">
    <div class="header">
      <div class="btnLeft">
        <button class="btn pre" @click="goToPrev"></button>
        <!-- <button class="btn home" @click="goHome"></button> -->
      </div>
      <div class="headTit">金牛电气库房管理系统</div>
      <div class="btnRight">
        <!-- <button
          class="btn auto"
          :class="{ isFull: isBigScreen.fullscreen }"
          @click="handleFullScreen"
        ></button> -->
        <button class="btn end" @click="goToEnd"></button>
        <!-- <button class="btn out" @click="goToLogin"></button> -->
      </div>
    </div>
    <div class="main">
      <div class="box">
        <div class="item1">
          <div class="middle">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              库存预警
            </div>
            <div class="list">
              <div class="header1">
                <div class="headerItem">物料名称</div>
                <div class="headerItem">台数</div>
              </div>
              <div class="listItem">
                <div
                  class="itemBox"
                  v-for="(item, index) in inventoryAlarmData"
                  :key="index"
                  :class="index % 2 != 0 ? 'itemBoxBg' : ''"
                >
                  <div class="boxLeft">{{ item.skuName }}</div>
                  <div class="boxLeft" style="color: #ff5134">
                    {{ item.number }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle mm">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              未到货预警
            </div>
            <div class="list">
              <div class="header1">
                <div class="headerItem">物料名称</div>
                <div class="headerItem">台数</div>
              </div>
              <div class="listItem">
                <div
                  class="itemBox"
                  v-for="(item, index) in notDeliveredData"
                  :key="index"
                  :class="index % 2 != 0 ? 'itemBoxBg' : ''"
                >
                  <div class="boxLeft">{{ item.skuName }}</div>
                  <div class="boxLeft" style="color: #ff5134">
                    {{ item.notDelivered }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle mm">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              月度成品入库数量
            </div>
            <div class="monthDay">
              <div class="monthBg"></div>
              <productWareChange
                :currentMonthData="currentMonthData"
                :monthCountData="monthCountData"
                :key="KG"
              ></productWareChange>
            </div>
          </div>
        </div>
        <div class="item2">
          <div class="itemUp">
            <div class="img">
              <img
                src="../../assets/img/list/theChange.png"
                alt=""
                style="width: 500px; height: auto"
              />
            </div>
          </div>
          <div class="itemDown">
            <div
              style="
                font-size: 18px;
                color: #00ffff;
                margin-left: 10px;
                padding-top: 10px;
              "
            >
              月度项目完成度
            </div>
            <div class="progressBox">
              <div
                class="progressItem"
                v-for="(item, index) in monthPercent"
                :key="index"
              >
                <div class="proLeft">{{ item.projectName }}:</div>
                <div class="proRight">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="24"
                    :percentage="item.percent"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item1">
          <div class="middle">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              当日入库记录
            </div>
            <div class="list">
              <div class="header1">
                <div class="headerItem">物料名称</div>
                <div class="headerItem">台数</div>
              </div>
              <div class="listItem">
                <div
                  class="itemBox"
                  v-for="(item, index) in importGoodsData"
                  :key="index"
                  :class="index % 2 != 0 ? 'itemBoxBg' : ''"
                >
                  <div class="boxLeft">{{ item.skuName }}</div>
                  <div class="boxLeft" style="color: #ff5134">
                    {{ item.number }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle mm">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              当日出库记录
            </div>
            <div class="list">
              <div class="header1">
                <div class="headerItem">物料名称</div>
                <div class="headerItem">台数</div>
              </div>
              <div class="listItem">
                <div
                  class="itemBox"
                  v-for="(item, index) in exportGoodsData"
                  :key="index"
                  :class="index % 2 != 0 ? 'itemBoxBg' : ''"
                >
                  <div class="boxLeft">{{ item.skuName }}</div>
                  <div class="boxLeft" style="color: #ff5134">
                    {{ item.number }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle mm">
            <div style="font-size: 18px; color: #00ffff; margin-left: 10px">
              变压器月度销量
            </div>
            <div class="monthDay">
              <div class="monthBg"></div>
              <monthDeliveryChange
                :currentDelivery="currentDelivery"
                :monthDeliveryData="monthDeliveryData"
                :key="BY"
              ></monthDeliveryChange>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import monthKG from "@/components/overall/monthKG.vue";
import monthBY from "@/components/overall/monthBY.vue";
import productWareChange from "@/components/overall/productWareChange.vue";
import monthDeliveryChange from "@/components/overall/monthDeliveryChange.vue";
import goodsApi from "@/api/inwarehouse/goods-api";
import ScreenApiByq from "@/api/purchase/screen-apiByq";
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const KG = ref(false);
const BY = ref(false);
const alertList = ref([]);

const getGoodsAlart = async () => {
  const res = await goodsApi.list({ otherFilter: { alert: true } });
  alertList.value = res.data.records;
  // console.log("getGoodsAlart", alertList.value);
};

let screen = ref();

function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

// function getScale(w = 1920, h = 1080) {
//     const ww = window.innerWidth / w;
//     const wh = window.innerHeight / h;
//     const aspectDiff = Math.abs(ww - wh);

//     // 根据宽高比之差来调整缩放比例
//     return aspectDiff < 0.1 ? ww : wh;
// }

// function getScale(w = 1920, h = 1080) {
//   const ww = window.innerWidth / w;
//   const wh = window.innerHeight / h;
//   const screenRatio = ww / wh; // 计算屏幕宽高比
//   const designRatio = w / h; // 计算设计稿宽高比

//   // 根据设计稿宽高比与屏幕宽高比的差异来确定缩放比例
//   if (screenRatio > designRatio) {
//     return window.innerWidth / w; // 使用宽度进行缩放
//   } else {
//     return window.innerHeight / h; // 使用高度进行缩放
//   }
// }

const inventoryAlarmData = ref([]);
const inventoryAlarm = async () => {
  const res = await ScreenApiByq.inventoryAlarm();
  inventoryAlarmData.value = res.data.data;
};

const notDeliveredData = ref([]);
const notDelivered = async () => {
  const res = await ScreenApiByq.notDelivered();
  notDeliveredData.value = res.data.data;
};

const importGoodsData = ref([]);
const importGoods = async () => {
  const res = await ScreenApiByq.importGoods();
  importGoodsData.value = res.data.data;
};

const exportGoodsData = ref([]);
const exportGoods = async () => {
  const res = await ScreenApiByq.exportGoods();
  exportGoodsData.value = res.data.data;
};

const currentMonthData = ref([]);
const monthCountData = ref([]);
const productWare = async () => {
  const res = await ScreenApiByq.productWarehousing();
  let currentMonth = [];
  currentMonth = res.data.data;
  currentMonthData.value = currentMonth.map((item) => {
    return item.currentMonth.replace(/\d{4}-/, "");
  });
  monthCountData.value = currentMonth.map((item) => {
    return item.monthCount;
  });
};

const currentDelivery = ref([]);
const monthDeliveryData = ref([]);

const Delivery = async () => {
  const res = await ScreenApiByq.monthDelivery();
  let currentMonth = [];
  currentMonth = res.data.data;
  currentDelivery.value = currentMonth.map((item) => {
    return item.currentMonth.replace(/\d{4}-/, "");
  });
  monthDeliveryData.value = currentMonth.map((item) => {
    return item.monthCount;
  });
};

const monthPercent = ref([]);
const monthProjectPercent = async () => {
  const res = await ScreenApiByq.monthProjectPercent();
  monthPercent.value = res.data.data.map((item) => {
    const percent = Math.ceil(item.percent.replace("%", "")); // 去掉百分号
    return { ...item, percent };
  });
  // console.log('monthPercent',res)
};

window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};

onMounted(async () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  await getGoodsAlart();
  await inventoryAlarm();
  await notDelivered();
  await importGoods();
  await exportGoods();
  await productWare();
  await Delivery();
  await monthProjectPercent();
  KG.value = !KG.value;
  BY.value = !BY.value;
});

//是否全屏
const isBigScreen = reactive({
  fullscreen: false, // 是否全屏
});

function handleFullScreen() {
  let element = document.documentElement;
  // 判断是否已经是全屏,如果是全屏，退出
  if (isBigScreen.fullscreen) {
    if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  } else {
    // 否则，进入全屏
    if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      //火狐
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    } else if (element.requestFullscreen) {
      // w3c
      element.requestFullscreen();
    }
  }
  isBigScreen.fullscreen = !isBigScreen.fullscreen;
}

const router = useRouter();

//回退
function goToPrev() {
  router.go(-1);
}

//回主页
function goHome() {
  // router.push('/home')
}

//终端
const goToEnd = () => {
  router.push("/index");
  if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
  // alert("暂时不可访问后台");
  // window.open("http://www.baidu.com")
};

//退出
function goToLogin() {
  // ElMessageBox.confirm(
  //     '亲爱的管理员，确认退出吗?',
  //     'Warning',
  //     {
  //       confirmButtonText: 'OK',
  //       cancelButtonText: 'Cancel',
  //       type: 'warning',
  //       draggable: true,
  //     }
  // ).then(() => {
  //   window.sessionStorage.clear()
  //   router.push('/login')
  // }).catch(() => {
  //   ElMessage({
  //     type: 'info',
  //     message: '已取消退出',
  //   })
  // })
}
</script>

<style scoped lang="scss">
body {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

// * 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 隐藏滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.layout {
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;
  // display: flex;
  // flex-wrap: wrap;
  // align-content: center;
  background-color: #0e1f21 !important;
  position: fixed;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: left top;

  .header {
    width: 1920px;
    height: 113px;
    box-sizing: border-box;
    padding-top: 23px;
    display: flex;
    justify-content: space-between;
    //background: url("../assets/img/layout/headerBg.png") no-repeat center;
    // background: url("~@/assets/img/layout/hbg.png") no-repeat center;
    background: url("~@/assets/img/layout/wmsheader.png") no-repeat center;
    background-size: contain;
    position: relative;
    .headTit {
      font-size: 50px;
      color: #00ffff;
      font-weight: bold;
      letter-spacing: 5px;
      // margin-left: 94px;
    }

    .btn {
      margin: 0 21px;
      cursor: pointer;
      border: none;
    }

    .pre {
      width: 107px;
      height: 20px;
      background: url("~@/assets/img/layout/pre.png") no-repeat center;
      background-size: contain;
    }

    .home {
      width: 93px;
      height: 20px;
      background: url("~@/assets/img/layout/home.png") no-repeat center;
      background-size: contain;
    }

    .auto {
      width: 63px;
      height: 20px;
      background: url("~@/assets/img/layout/auto.png") no-repeat center;
      background-size: contain;
    }

    .isFull {
      width: 63px;
      height: 20px;
      background: url("~@/assets/img/layout/full.png") no-repeat center;
      background-size: contain;
    }

    .end {
      width: 62px;
      height: 20px;
      background: url("~@/assets/img/layout/end.png") no-repeat center;
      background-size: contain;
    }

    .out {
      width: 96px;
      height: 20px;
      background: url("~@/assets/img/layout/out.png") no-repeat center;
      background-size: contain;
    }
  }

  .main {
    width: 1920px;
    height: 967px;
    box-sizing: border-box;
    .box {
      width: 100%;
      height: 900px;
      padding: 20px 40px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      .item1 {
        width: 532px;
        height: 100%;
        box-sizing: border-box;
        .middle {
          box-sizing: border-box;
          padding-top: 10px;
          width: 532px;
          height: 294px;
          background: url("../../assets/img/layout/itemBg.png") no-repeat center;
          background-size: cover;
          .list {
            width: 95%;
            height: auto;
            margin: 20px auto;
            .header1 {
              width: 100%;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #073a3d;
              border-radius: 4px;
              .headerItem {
                width: 50%;
                height: 100%;
                text-align: center;
                line-height: 20px;
                color: #fff;
                font-size: 12px;
              }
            }
            .listItem {
              width: 100%;
              height: 190px;
              overflow-y: scroll;
              .itemBox {
                width: 100%;
                height: 20px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                .boxLeft {
                  width: 50%;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  font-size: 12px;
                }
              }
              .itemBoxBg {
                background-color: #073a3d;
              }
            }
          }
          .monthDay {
            margin: 0 auto;
            width: 520px;
            height: 290px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .monthBg {
              width: 82%;
              height: 57%;
              background: url("../../assets/img/list/Cwang.png") no-repeat
                center;
              background-size: cover;
              position: absolute;
              left: 48px;
              bottom: 68px;
            }
          }
        }
        .mm {
          margin-top: 20px;
        }
      }
      .item2 {
        width: 756px;
        height: 100%;
        // background-color: antiquewhite;
        .itemUp {
          width: 756px;
          height: 612px;
          background: url("../../assets/img/list/change.png") no-repeat center;
          background-size: contain;
          position: relative;
          .img {
            position: absolute;
            left: 18%;
            bottom: 20%;
            // margin: 0 auto;
          }
        }
        .itemDown {
          margin: 20px auto 0 auto;
          width: 736px;
          height: 292px;
          background: url("../../assets/img/layout/itemBg.png") no-repeat center;
          background-size: cover;
          .progressBox {
            width: 100%;
            height: 190px;
            margin-top: 30px;
            overflow-y: scroll;
            padding: 10px 20px;
            .progressItem {
              width: 100%;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 5px;
              .proLeft {
                width: auto;
                height: 100%;
                line-height: 24px;
                text-align: center;
                color: #fff;
                margin-right: 3px;
                font-size: 12px;
              }
              .proRight {
                width: 55%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
